<template>
	<div>
		<div class="css-main" v-for="(item,index) in info" :key="index">
			<div class="order-item">
					<div class="css-ordertop" @click="godetail(item.OrderId)">
						<div>
							<div v-if="isArtificer === 0">服务技师: {{ item.ArtificerName }}</div>
							<div v-if="isArtificer === 1">客户: {{ item.ContactName }}</div>
							<div>预约时间：<span class="restime">{{ item.ServiceStartTime }}</span></div>
						</div>
						<div class="css-mdtxt" :class="'State' + item.State ">{{ item.StateName }}</div>
					</div>
					<div class="order-item" v-if="item.DetailList && item.DetailList.length > 0" @click="godetail(item.OrderId)">
						<div class="item-main ptb-24" v-for="(items,index) in item.DetailList" :key="index">
							<div class="img-item">
									<img-box class="classImg ofh br-16" :img-url="items.ProductImage" />
							</div>
							<div class="right ml-24">
								<div class="right-box-text" >{{ items.Name }}</div>
								<div class="pricenum">
									<div><span class="payunit">￥</span><span class="payn2">{{ items.Price }}</span></div>
									<p>x{{ items.Amount }}</p>
								</div>
							</div>
						</div>
					</div>
					
					<div class="css-btn" >
						<div class="payn1">
							<span>订单金额</span>
							<span class="payunit">￥</span>
							<span class="payn2">{{ item.PriceSum }}</span><span class="traval">(含路费{{item.PostagePrice}})</span>
						</div>
						<div class="payn1" v-if="item.CouponMoney !== 0">
							<span>{{ item.State ===0?'需付款':'实付款' }} </span>
							<span class="payunit">￥</span>
							<span class="payn2">{{item.State ===0?(item.PriceSum-item.CouponMoney).toFixed(2):item.ReceiptMoney }}</span>
						</div>
						<div>
							<orderBtn :info="item" :switch30="switch30" @refund="refund" @reset="reset" @startService="startService" :technician="technician"></orderBtn>
						</div>
					</div>
			</div>
		</div>
	</div>
	
</template>

<script>
import imgBox from 'components/imgBox'
import orderBtn from 'components/physioOrder/orderBtn.vue'
import { CancleOrder } from 'api/teaHouse'

export default {
  name: 'mealOrder',
  components: {
		imgBox,orderBtn
  },
  props: {  
		info: {
      type: Array,
      required: true
    },
		switch30: {
			type: Number,
			default: 1
		},
		technician: {
			type: Boolean,
			default: false
		},
		isArtificer: {
			type: Number,
			default: 0
		},		
  },
  data() {
    return {
			
		
    }
  },
  watch: {
		info(newVal,oldVal){
			this.info = newVal
		}
  },
  created() {		
    this.info = this.info
  },
  methods: {		 
			getStatusTxt(){
				let status = this.info.status
				switch (status) {
					case 1:
							return '待支付'
						break;
					case 2:
							return '已服务'
						break;
					case 3:
							return '进行中'
						break;
					case 4:
							return '待评价'
						break;
					case 5:
							return '已取消'
						break;
					default:
						break;
				}
			},
			//查看订单详情
			godetail(id){
				this.$router.push({
				path: '/physioOrderDetail',
					query: {
						id: id,
						isArtificer: this.isArtificer
					}
        })
			},
			refund(item) {
				this.$emit('refund',item)
      },
			startService(item) {
				this.$emit('startService',item)
      },
			reset(){
				this.$emit('reset')
			}
			
  }
}
</script>
<style lang="scss" scoped>
@import "index.scss";
.css-mendian{
		margin-left: 15rpx;
}
.item-main{
	display: flex;
}
.right{
	width: calc(100% - 224px);
	display: flex;
  flex-direction: column;
  justify-content: space-between;	
	.right-box-text{
		color: #2A2D33;
		font-size: 32px;
		padding-right: 10px;
		//font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		letter-spacing: 2px;
		span{
			background-color: #F2F3FC;
			padding: 4px 8px;
			font-size: 24px;
			border-radius: 4px;
			text-align: center;
			margin-right: 10px;
		}
	}
	.order-desc{
		color: #999;
	}
}
.pro-text{
	font-size: 28px;
	font-weight: 600;
}
.css-rightimg{
	width: 32px;
	height: 32px;
	margin-top: 5px;
}
.css-main{
	margin: 24px;
	background: white;
	padding: 24px;
	border-radius: 24px;
}
.css-btn{
  display: flex;
	flex-direction: column;
	align-items: flex-end;
	border-top: 2px solid #F2F3FC;
	padding-top: 24px;
}

//.btn {
//		width: 170px;
//		padding: 0;
//		height: 64px;
//		line-height: 64px;
//		border-radius: 32px;
//		text-align: center;
//}
.css-dzf{
	background: #FFF3DB;
	height: 72px;
	line-height: 72px;
	margin: 30px 30px -30px 30px;
	border-radius: 16px 16px 0 0 ;
}
.restime{
	color: $physio-primary1;
	font-weight: Medium;
}
.payn1{
	display: flex;
	align-items: center;
	color: #34267F;
}
.payunit{
	color: #34267F;
	font-size: 28px;
}
.traval{
	font-size: 24px;
	color: #7D8699;
}
.payn2{
	color: #34267F;
	font-size: 36px;
	font-weight: bold;
}
.pricenum{
	display: flex;
	align-items: center;
	height: 42px;
	line-height: 42px;
	margin-top: 60px;
	.payn2{
		margin-right: 8px;
	}
}
.order-item{
	display: flex;
	flex-direction: column;
}
.classImg{
	width: 224px;
	height: 180px;
}
.css-mdtxt{
	width: 104px;
	height: 40px;
	line-height: 40px;
	border-radius: 8px;
	text-align: center;
}
.State0{
	background: #F2F3FC;
	color:#24c373;
}
.State1{
	background: rgba(76, 163, 247, 0.12);
	color:#4CA3F7;
}
.State2,.State3,.State8{
	background: rgba(70, 220, 204,0.1);
	color:#46DCCC;
}
.State4{
	background:rgba(241, 127, 210, 0.09);
	color:#F17FD2 ;
}
.State5,.State6,.State7{
	background: #F2F3FC;
	color:#333;
}
</style>
